<template>
    <div id="role">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">管理员设置</el-breadcrumb-item>
            <!--            <el-breadcrumb-item>分成统计</el-breadcrumb-item>-->
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label=""
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.name" placeholder="请输入管理员账号"></el-input>
                </el-form-item>
                <el-form-item label=""
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.true_name" placeholder="请输入管理员真实姓名"></el-input>
                </el-form-item>
                <el-form-item label=""
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.phone" placeholder="请输入管理员手机号"></el-input>
                </el-form-item>
                <el-form-item label=""
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.role_id" placeholder="请选择角色" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option :label="item.name" :value="item.id" v-for="(item,index) in roleList"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=""
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="getList">查询</el-button>
                    <el-button type="primary" size="small" @click="addRecharge">添加</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    size="small">
                <el-table-column
                        prop="name"
                        label="管理员名">
                </el-table-column>
                <el-table-column
                        prop="roles"
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'100':''"
                        label="角色">
                </el-table-column>
                <el-table-column
                        prop="true_name"
                        label="真实姓名">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'100':''"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="updated_at"
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'150':''"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="updated_at"
                        width="150"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" plain size="small" @click="edit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog :title="fromTitle" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :label-width="this.$store.state.labelWidth" size="small" :model="form">
                        <el-form-item label="管理员头像">
                            <el-upload
                                    class="avatar-uploader"
                                    action="upDataUrl"
                                    :show-file-list="false"
                                    :http-request="myUpload"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="form.avatar" :src="form.avatar" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="管理员名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="管理员密码">
                            <el-input v-model="form.password"></el-input>
                        </el-form-item>
                        <el-form-item label="真实姓名">
                            <el-input v-model="form.true_name"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-checkbox-group v-model="form.role_id">
                                <el-checkbox :label="item.id" v-for="(item,index) in roleList" :key="index">
                                    {{item.name}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="form.status" placeholder="状态"
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="禁用" value="0"></el-option>
                                <el-option label="启用" value="1"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible=false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
    import {uploadimg} from '../../utils/common'

    export default {
        name: "role",
        data() {
            return {
                form: {
                    name: '',
                    status: '',
                    avatar: '',
                    true_name: '',
                    phone: '',
                    role_id: [],
                    password: ''
                },
                newArr: [],
                tableData: [],
                fromTitle: '',
                visible: false,
                roleList: [],
                id: '',
                imgData: {},
                domain: '',
                upDataUrl: '',
                searchForm: {
                    status: '',
                    name: '',
                    true_name: '',
                    phone: '',
                    role_id: '',
                }
            }
        },
        created() {
            this.getList();
            this.getRoleList();
        },
        methods: {
            getList() {
                this.$axios.post('admin/admin/index', this.searchForm).then((res) => {
                    let data = res.data;
                    this.tableData = data;
                });
            },
            getRoleList() {
                let data = {
                    page: 1,
                    page_size: 100,
                };
                this.$axios.post('admin/role/index', data).then((res) => {
                    let data = res.data;
                    this.roleList = data;
                    console.log(this.roleList);
                });
            },
            addRecharge() {
                this.fromTitle = '新增';
                this.id = '';
                this.form = {
                    name: '',
                    status: '',
                    avatar: '',
                    true_name: '',
                    phone: '',
                    password: '',
                    role_id: []
                };
                this.visible = true
            },
            dialogAffirm() {
                if (this.id) {
                    //编辑
                    this.$axios.put('admin/admin/' + this.id, this.form).then((res) => {
                        this.$message.success('成功');
                        this.getList();
                        this.visible = false;
                    });
                } else {
                    // 添加
                    console.log(this.form);
                    this.$axios.post('admin/admin', this.form).then((res) => {
                        this.$message.success('成功');
                        this.getList();
                        this.visible = false;
                    });
                }
            },
            edit(id) {
                this.id = id;
                this.fromTitle = '编辑';
                this.visible = true;
                this.$axios.get('admin/admin/' + id, {}).then((res) => {
                    res.data.data.role_id = res.data.role_ids;
                    let data = res.data.data;
                    this.form = data;
                    this.visible = true;
                });
            },
            remove(id) {
                this.$confirm('确定要进行操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.del('admin/admin/' + id, '').then((res) => {
                        this.$message.success('删除成功!');
                        this.getList();
                    });
                }).catch(() => {

                });
            },
            beforeAvatarUpload(file) {
                var suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
                let arr = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'pdf', 'JPG', 'JPEG', 'PNG', 'GIF', 'BMP', 'PDF']
                if (arr.indexOf(suffix) === -1) {
                    this.$message.error('上传图片格式有误');
                    return false
                }
            },
            // 上传文件
            myUpload(content) {
                uploadimg(content).then(res => {
                    this.form.avatar = res;
                })
            },
        }
    }
</script>

<style scoped>

</style>